<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--颜色名称 css2有171个，css3有140个，甚至我们也可以自己定义-->
    <div class="test-named-color">测试有名颜色</div>
    <!--rgb,rgba颜色-->
    <div class="test-rgb">测试rgb颜色</div>
    <!--长短16进制颜色-->
    <div class="test-hex-color">测试hex颜色</div>
    <!--hsl,hsla颜色-->
    <div class="test-hsl">测试hsl颜色</div>
    <!--不透明度opacity-->
    <div class="test-opacity">测试不透明度颜色</div>
    <style>
        div{
            /*给所有div中的文字一个统一的前景色*/
            color: rgb(109, 179,19);
            width: 200px;
            height: 100px;
            /*画一个宽一些的边框，留意边框下的背景色*/
            border: 15px red dashed;
            /*div间隔*/
            margin-bottom: 5px;
        }

        .test-named-color{
            background-color: aquamarine;
        }
        .test-rgb{
            background-color: rgb(10, 150, 234);
        }
        .test-hex-color{
            background-color: #f00ff0;
        }
        .test-hsl{
            background-color:hsl(120,30%,70%);
        }
    </style>
    <hr>
    这是我的代码源
    <pre>
    &lt!--颜色名称 css2有171个，css3有140个，甚至我们也可以自己定义-->
    &ltdiv class="test-named-color">测试有名颜色&lt/div>
    &lt!--rgb,rgba颜色-->
    &ltdiv class="test-rgb">测试rgb颜色&lt/div>
    &lt!--长短16进制颜色-->
    &ltdiv class="test-hex-color">测试hex颜色&lt/div>
    &lt!--hsl,hsla颜色-->
    &ltdiv class="test-hsl">测试hsl颜色&lt/div>
    &lt!--不透明度opacity-->
    &ltdiv class="test-opacity">测试不透明度颜色&lt/div>
    &ltstyle>
        div{
            /*给所有div中的文字一个统一的前景色*/
            color: rgb(109, 179,19);
            width: 200px;
            height: 100px;
            /*画一个宽一些的边框，留意边框下的背景色*/
            border: 15px red dashed;
            /*div间隔*/
            margin-bottom: 5px;
        }

        .test-named-color{
            background-color: aquamarine;
        }
        .test-rgb{
            background-color: rgb(10, 150, 234);
        }
        .test-hex-color{
            background-color: #f00ff0;
        }
        .test-hsl{
            background-color:hsl(120,30%,70%);
        }
    &lt/style>
    </pre>
</body>
</html>